<template>
  <div class="search-form">
    <a-form ref="searchFormRef" layout="inline" :model="searchForm" @finish="handleSearch">
      <template v-for="(item, index) in formItems" :key="index">
        <a-form-item :label="item.label" :name="item.field" v-bind="item.formItemProps">
          <slot v-if="item.field instanceof Array" :name="item.field[1]">
            <component
              :is="componentMap[(item.type as keyof typeof componentMap) || 'input']"
              v-model:value="searchForm[item.field[0]][item.field[1]]"
              :placeholder="item.placeholder"
              allow-clear
              v-bind="item.controlProps"
            />
          </slot>
          <slot v-else :name="item.field">
            <component
              :is="componentMap[(item.type as keyof typeof componentMap) || 'input']"
              v-model:value="searchForm[item.field]"
              :placeholder="item.placeholder"
              allow-clear
              v-bind="item.controlProps"
            />
          </slot>
        </a-form-item>
      </template>
      <a-form-item>
        <a-button type="primary" html-type="submit">
          <template #icon><SearchOutlined /></template>
          查询
        </a-button>
        <a-button style="margin-left: 4px" @click="handleReset">
          <template #icon><UndoOutlined :rotate="90" /></template>重置</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { Input, Select, Textarea, DatePicker, RangePicker, TreeSelect, Tree } from 'ant-design-vue'

interface FormItem {
  label?: string
  field: string | string[] //v-model绑定字段,插槽名称
  placeholder?: string
  type?: string //表单控件组件名称,默认input
  formItemProps?: object //a-form-item组件属性
  controlProps?: object //表单控件组件属性
}

withDefaults(defineProps<{ formItems: FormItem[] }>(), {
  formItems: () => [],
})

const emits = defineEmits(['search', 'reset'])

const componentMap = {
  input: Input,
  select: Select,
  textarea: Textarea,
  date: DatePicker,
  dateRange: RangePicker,
  treeSelect: TreeSelect,
  tree: Tree,
}

const searchFormRef = ref()

const searchForm = defineModel({ type: Object, default: {} })

const handleSearch = () => {
  const params = JSON.parse(JSON.stringify(searchForm.value, (key, val) => val ?? ''))
  emits('search', params)
  // getValveOrderPage(params)
  //   .then((res: any) => {
  //     if (res.code === 200) {
  //       tableData.value = res.data?.list || [];
  //       total.value = res.data?.total || 0;
  //     } else {
  //       tableData.value = [];
  //       total.value = 0;
  //       message.error(res.msg || '查询失败');
  //     }
  //   })
  //   .finally(() => {
  //     loading.value = false;
  //   });
}

const handleReset = () => {
  searchFormRef.value?.resetFields()

  searchForm.value.pageNo = 1
  searchForm.value.pageSize = 20

  const params = JSON.parse(JSON.stringify(searchForm.value, (key, val) => val ?? ''))
  emits('reset', params)
}
</script>

<style scoped lang="scss"></style>
